<script setup>
import Footer from "@/components/Footer.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { reportService } from "@/api/hospital";

const route = useRoute();
const navIndex = ref(0);
const activeclass = "active";
const data = ref([
  {
    ciname: "",
    items: [
      {
        name: "",
        minrange: "",
        maxrange: "",
        normalvalue: "",
        normalvaluestring: "",
        type: "",
        iserror: "",
        value: "",
        unit: "",
      },
    ],
  },
]);
const results = ref([
  {
    title: "",
    content: "",
  },
]);

const getReport = async () => {
  //console.log(route.query.orderId);
  //let result = await reportService(100569832);
  let result = await reportService(route.query.orderId);
  console.log(result);
  if (result.code == 200) {
    data.value = result.data.items;
    results.value = result.data.results;
  }
};

const changeNav = () => {
  if (navIndex.value == 0) {
    navIndex.value = 1;
  } else {
    navIndex.value = 0;
  }
};

onMounted(async () => {
  await getReport();
});
</script>

<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>体检报告</p>
      <div></div>
    </header>

    <nav>
      <div :class="navIndex == 0 ? activeclass : ''" @click="changeNav()">
        总检结论
      </div>
      <div :class="navIndex == 1 ? activeclass : ''" @click="changeNav()">
        报告详情
      </div>
    </nav>

    <div class="top-ban"></div>

    <div class="nav-content-item" v-show="navIndex === 0">
      <div class="item">
        <div class="title">异常项</div>
        <ul v-for="(item, index) in data" :key="index">
          <li v-for="(item1, index1) in item.items" :key="index1">
            <div class="indications" v-if="item1.iserror === 1">
              <div class="left">
                <div>异</div>
                <p>{{ item1.name }}</p>
              </div>
              <div class="right">
                <p>{{ item1.value }}  {{ item1.unit }}</p>
                <p v-if="item1.type === 1 || item1.type === 2">
                  正常值范围：{{ item1.normalvaluestring }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="title">一、尊敬的顾客，您本次体检结论如下：</div>
        <ul v-for="(item, index) in results" :key="index">
          <li class="conclusion-title">{{ `${index + 1}、${item.title}` }}</li>
        </ul>
      </div>
      <div class="item">
        <div class="title">二、尊敬的顾客，您本次体检建议信息如下：</div>
        <ul v-for="(item, index) in results" :key="index">
          <li class="conclusion-content">
            <h3>{{ `${index + 1}、${item.title}` }}</h3>
            <p>
              {{ item.content }}
            </p>
          </li>
        </ul>
      </div>
    </div>

    <div class="nav-content-item" v-show="navIndex === 1">
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="title">{{ item.ciname }}</div>
        <ul>
          <li v-for="(item1, index1) in item.items" :key="index1">
            <div class="indications">
              <div class="left">
                <div v-show="item1.iserror === 1">异</div>
                <p>{{ item1.name }}</p>
              </div>
              <div class="right">
                <p>{{ item1.value }}   {{ item1.unit }}</p>
                <p v-if="item1.type === 1 || item1.type === 2">
                  正常值范围：{{ item1.normalvaluestring }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="bottom-ban"></div>
    <Footer> </Footer>
  </div>
</template>

<style scoped>
@import "@/assets/css/report.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
